<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>huawei</title>
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/swiper.animate.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet/less" type="text/css" href="css/view-style.less">
    <script src="js/less.js"></script>
    <script src="js/PxLoader.min.js"></script>
    <script src="js/PxLoaderImage.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>
    <script src="/js/gsap/gsap.min.js"></script>
    <script src="/js/gsap/ScrollTrigger.min.js"></script>
    <script src="js/viewIndex.js"></script>
    <script src="js/wow.min.js"></script>
</head>
<body>
<div class="container">
    <header class="header">
        <img src="img/pc_bg.png" alt="header">
    </header>

    <section class="phone-body section-text">
        <div class="copy-write">
            <div class="theme">
                <h4 class="wow animate__fadeInUp">潮流设计+轻盈机身</h4>
                <h2 class="wow animate__fadeInUp">
                    <span>一眼心动,</span>
                    <span>一触流连</span>
                </h2>
            </div>
            <div class="text wow animate__fadeInUp">
                nova 5 将炫光、渐变与钻石切面巧妙结合，形成光影与空间的视觉艺术。
                创新 3D 精雕纹理工艺，打造幻境星芒般的光影效果，令机身色彩随光影自由流动，纯然中不失唯美梦幻。
                一眼，怦然心动。7.33 毫米轻薄机身，优美的曲线弧度，打造舒适手感。一触，流连忘返。
            </div>
        </div>
        <div class="phone-image">
            <img src="img/section2-left.png" alt="" class="phone_left">
            <img src="img/section2-right.png" alt="" class="phone_right">
            <img src="img/section2-text.png" alt="" class="phone_text">
            <img src="img/section2-center.png" alt="" class="phone_center">
        </div>
    </section>

    <section class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide orange">
                    <img alt="orange_left" src="img/orange_left.png" class="ani" swiper-animate-effect="mySlideInUp">
                    <img alt="orange_right" src="img/orange_right.png" class="ani" swiper-animate-effect="mySlideInUp" swiper-animate-delay="0.1s">
                </div>
                <div class="swiper-slide green">
                    <img alt="green_left" src="img/green_left.png" class="ani" swiper-animate-effect="mySlideInUp">
                    <img alt="green_right" src="img/green_right.png" class="ani" swiper-animate-effect="mySlideInUp" swiper-animate-delay="0.1s">
                </div>
                <div class="swiper-slide purple">
                    <img alt="purple_left" src="img/purple_left.png" class="ani" swiper-animate-effect="mySlideInUp">
                    <img alt="purple_right" src="img/purple_right.png" class="ani" swiper-animate-effect="mySlideInUp" swiper-animate-delay="0.1s">
                </div>
                <div class="swiper-slide black">
                    <img alt="black_left" src="img/black_left.png" class="ani" swiper-animate-effect="mySlideInUp">
                    <img alt="black_right" src="img/black_right.png" class="ani" swiper-animate-effect="mySlideInUp" swiper-animate-delay="0.1s">
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <p class="swiper-line"></p>
            <p class="swiper-name">
                <span>珊瑚橙<br>绮境森林<br>仲夏紫<br>亮黑色</span>
            </p>
            <p class="swiper-num">
                <span>01<br>02<br>03<br>04</span>
            </p>
        </div>
    </section>

    <section class="camera section-text">
        <div class="copy-write">
            <div class="theme">
                <h4 class="wow animate__fadeInUp">3200万超高清自拍</h4>
                <h2 class="wow animate__fadeInUp">
                    <span>让美，</span>
                    <span>尽善尽美</span>
                </h2>
            </div>
            <div class="text wow animate__fadeInUp">
                掌控逆光，让光听从你的美。前置 AI HDR+ ，突破光线限制，逆光自拍时，明暗与细节清晰呈现，
                自然柔和映衬 你的面容，让你的每一次自拍，都掠尽风光。
            </div>
        </div>
        <div class="camera_center pc_dom pc_camera_center">
            <img src="img/pic_s5_pc.png" alt="" class="pic_s5_pc">
            <img src="img/pic_s5_pc_allphone.png" alt="" class="pic_s5_pc_allphone">
            <img src="img/pic_s6_pc_1.png" alt="" class="pic_s6_pc_1">
            <img src="img/pic_s6_pc_5.png" alt="" class="pic_s6_pc_5">
            <img src="img/pic_s6_pc_3.png" alt="" class="pic_s6_pc_3">
            <img src="img/pic_s6_pc_4.png" alt="" class="pic_s6_pc_4">
        </div>
        <div class="camera_center mobile_dom mobile_camera_center">
            <img src="img/pic_s6_pc_5.png" alt="" class="pic_s6_pc_5">
            <img src="img/pic_s6_pc_3.png" alt="" class="pic_s6_pc_3">
            <img src="img/pic_s6_pc_4.png" alt="" class="pic_s6_pc_4">
        </div>
    </section>

    <section class="camera_1 section-text">
        <div class="copy-write">
            <div class="theme">
                <h4 class="wow animate__fadeInUp">4800 万 AI 四摄</h4>
                <h2 class="wow animate__fadeInUp">
                    <span>影像间，</span>
                    <span>勾勒精彩</span>
                    <span>生活</span>
                </h2>
            </div>
            <div class="text wow animate__fadeInUp">
                一个有所准备的摄影师，是生活的见证者和记录者。而当你手持 nova 5，多场景四摄影像系统，就已帮你准备就
                绪。无需携带多个镜头，不必繁琐设置参数，拿起手机，即可恣意记录属于你的精彩生活。
            </div>
        </div>
        <div class="camera_1_center">
            <img src="img/pic_s4_bg_update.png" alt="" class="pic_s4_bg_update">
        </div>
    </section>

    <section class="camera_2">
        <div class="copy-write section-text">
            <div class="theme">
                <h4 class="wow animate__fadeInUp">4800 万像素摄像头</h4>
                <h2 class="wow animate__fadeInUp">
                    <span>高清拍摄，</span>
                    <span> 细腻意想不到</span>
                </h2>
            </div>
            <div class="text wow animate__fadeInUp">
                定格的珍惜时刻，应经得起放大的考验。nova 5 搭载 4800 万像素摄像头，随手一拍的照片放大后，更多意想不
                到的细节纷纷涌现。再有手持超级夜景，AI HDR+ 加持，逆光、弱光、暗光下的精彩瞬息依然细腻呈现。
            </div>
        </div>
        <div class="camera_2_con">
            <div class="camera_2_center">
                <img src="img/pic_s8_pc_2_new.jpg" alt="" class="pic_s8_pc_2_new">
            </div>
        </div>
    </section>

    <section class="chip">
        <div id="chip-con">
            <video src="https://www.apple.com/105/media/us/iphone-15-pro/2023/2f337511-a940-4b57-b89c-1512b7507777/anim/performance/large_2x.mp4" muted playsinline autoplay loop></video>
            <h1>
                A17 Pro chip.<br>
                A monster win for gaming.
            </h1>
            <picture id="picture-iPhone-15-pro" class="picture loaded" data-lazy="" aria-hidden="true">
                <source srcset="https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_small.jpg, https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_small_2x.jpg 2x" media="(max-width:734px)">
                <source srcset="https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_medium.jpg, https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_medium_2x.jpg 2x" media="(max-width:1068px)">
                <source srcset="https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_large.jpg, https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_large_2x.jpg 2x" media="(min-width:0px)">
                <source srcset="https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_small.jpg, https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_small_2x.jpg 2x" media="(max-width:734px)">
                <source srcset="https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_medium.jpg, https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_medium_2x.jpg 2x" media="(max-width:1068px)">
                <source srcset="https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_large.jpg, https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_large_2x.jpg 2x" media="(min-width:0px)">
                <img src="https://www.apple.com/v/iphone-15-pro/c/images/overview/welcome/hero_endframe__ov6ewwmbhiqq_large.jpg" alt="">
            </picture>
            <div id="the-chip">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="262" height="262" viewBox="0 0 262 262" fill="none" id="chip-svg">
                    <rect id="mask-bg" x="20.5" y="80.5" width="227" height="116"   fill="#FFFFFF" ></rect>
                    <path d="M242.5 3.5L19.5 3.5C10.6634 3.5 3.5 10.6634 3.5 19.5L3.5 242.5C3.5 251.337 10.6634 258.5 19.5 258.5L242.5 258.5C251.337 258.5 258.5 251.337 258.5 242.5L258.5 19.5C258.5 10.6634 251.337 3.5 242.5 3.5ZM84.6325 82.598C84.9233 83.0342 85.7957 88.2689 82.0151 93.0674C77.6529 98.7382 71.9822 99.1745 71.5459 98.7382C71.1096 98.302 71.1096 93.0674 74.5994 88.2689C78.5255 83.0342 84.1963 82.1618 84.6325 82.598ZM98.8824 105.282C97.5737 106.154 91.0304 110.516 91.4667 117.496C91.9029 129.274 100.627 131.455 101.645 131.309C93.7931 148.758 86.8136 150.067 82.0151 148.322C78.0892 145.705 71.1096 146.141 68.9285 147.45C64.5664 149.631 61.949 150.503 58.0231 147.886C54.097 145.269 43.6277 131.455 44.3547 116.623C45.2272 101.792 56.569 98.302 60.4949 98.302C65.2934 98.302 69.2194 101.356 73.5815 101.356C77.0714 101.356 79.6887 98.7382 84.9233 98.302C93.2116 97.8658 98.8824 104.845 98.8824 104.845L98.8824 105.282ZM124.388 135.328L143.236 135.328L147.514 149.092L156.318 149.092L139.02 98.5L129.1 98.5L111.802 149.092L120.11 149.092L124.388 135.328ZM171.694 149.092L179.506 149.092L179.506 98.5L173.864 98.5L161.278 105.816L161.216 113.628L171.694 107.614L171.694 149.092ZM224.084 103.646L224.084 98.5L191.224 98.5L191.224 105.01L216.582 105.01L198.416 149.092L206.724 149.092L224.084 103.646ZM133.812 105.258L141.066 128.384L126.62 128.384L133.812 105.258ZM148.133 191.603Q151.02 193.475 154.73 193.475Q158.475 193.475 161.362 191.62Q164.25 189.765 165.86 186.405Q167.47 183.045 167.47 178.74Q167.47 174.435 165.86 171.075Q164.25 167.715 161.362 165.86Q158.475 164.005 154.73 164.005Q151.02 164.005 148.133 165.878Q145.245 167.75 143.635 171.092Q142.025 174.435 142.025 178.74Q142.025 183.045 143.635 186.387Q145.245 189.73 148.133 191.603ZM113.115 178.372Q114.27 176.29 114.27 173.595Q114.27 170.865 113.115 168.8Q111.96 166.735 109.878 165.598Q107.795 164.46 105.065 164.46L95.23 164.46L95.23 193.02L99.815 193.02L99.815 182.73L105.065 182.73Q107.795 182.73 109.878 181.592Q111.96 180.455 113.115 178.372ZM123.055 181.645L126.695 181.645L134.255 193.02L139.82 193.02L131.56 181.47Q134.57 180.875 136.303 178.635Q138.035 176.395 138.035 173.035Q138.035 170.48 136.985 168.538Q135.935 166.595 134.027 165.527Q132.12 164.46 129.565 164.46L118.47 164.46L118.47 193.02L123.055 193.02L123.055 181.645ZM158.965 188.295Q157.11 189.66 154.73 189.66Q152.35 189.66 150.512 188.295Q148.675 186.93 147.66 184.445Q146.645 181.96 146.645 178.74Q146.645 175.52 147.66 173.035Q148.675 170.55 150.512 169.185Q152.35 167.82 154.73 167.82Q157.11 167.82 158.965 169.185Q160.82 170.55 161.835 173.035Q162.85 175.52 162.85 178.74Q162.85 181.96 161.835 184.445Q160.82 186.93 158.965 188.295ZM108.18 169.553Q109.615 170.97 109.615 173.595Q109.615 176.22 108.18 177.637Q106.745 179.055 104.12 179.055L99.815 179.055L99.815 168.135L104.12 168.135Q106.745 168.135 108.18 169.553ZM128.585 177.97L123.055 177.97L123.055 168.135L128.585 168.135Q130.93 168.135 132.173 169.413Q133.415 170.69 133.415 173.035Q133.415 175.415 132.173 176.693Q130.93 177.97 128.585 177.97Z" stroke="rgba(0, 0, 0, 1)" stroke-width="1"    fill-rule="evenodd"  fill="#000000" ></path>
                    <path d="M242.5 0.5L19.5 0.5C9.00659 0.5 0.5 9.00659 0.5 19.5L0.5 242.5C0.5 252.993 9.00659 261.5 19.5 261.5L242.5 261.5C252.993 261.5 261.5 252.993 261.5 242.5L261.5 19.5C261.5 9.00659 252.993 0.5 242.5 0.5ZM6.5 19.5C6.5 12.3203 12.3203 6.5 19.5 6.5L242.5 6.5C249.68 6.5 255.5 12.3203 255.5 19.5L255.5 242.5C255.5 249.68 249.68 255.5 242.5 255.5L19.5 255.5C12.3203 255.5 6.5 249.68 6.5 242.5L6.5 19.5Z" stroke="rgba(255, 255, 255, 1)" stroke-width="1"    fill-rule="evenodd"  fill="#FFFFFF" ></path>
                </svg>
            </div>
        </div>
    </section>

    <section class="rocket-chip">
        <div class="chip-text">
            <h1>Rocket chip.</h1>
            <div class="text-container">
                <div class="left large-4">
                    Introducing <span class="highlight">M4, the next generation of Apple silicon</span>, delivering outrageous performance in the exceptionally thin and light design of iPad Pro. An entirely new display engine enables stunning precision, color, and brightness. A powerful GPU with hardware-accelerated ray tracing renders game-changing graphics. And the Neural Engine in M4 makes iPad Pro an absolute powerhouse for AI.
                </div>
                <div class="right large-4">
                    <figure class="stat">
                        Up to
                        <strong>4x faster</strong>
                        pro rendering performance than M2
                        <sup class="footnote footnote-number">
                            <a href="" aria-label="Footnote 3" data-modal-close="">3</a>
                        </sup>
                    </figure>
                    <figure class="stat m-30">
                        Up to
                        <strong>1.5x faster</strong>
                        CPU performance than M2
                        <sup class="footnote footnote-number">
                            <a href="" aria-label="Footnote 4" data-modal-close="">4</a>
                        </sup>
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="chip-M4">
        <video src="https://www.apple.com/105/media/us/ipad-pro/2024/97d7edf3-aac0-443d-9731-38d40ff50951/anim/m4-chip/large_2x.mp4" muted playsinline autoplay loop></video>
        <div id="the-chip_M4">
            <svg class="mask-text hide-for-base" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" xml:space="preserve">
        <g>
        <g>
            <path d="M1364.68,484.97c-6.48,10.3-13,20.64-19.56,31.01c-6.56,10.37-13.11,20.74-19.66,31.11
            c-6.56,10.37-13.11,20.71-19.66,31.01c-6.56,10.3-13.07,20.64-19.56,31.01v1.73h99.4V453.96h-1.51
            C1377.65,464.33,1371.16,474.67,1364.68,484.97z"></path>
        </g>
            <g>
            <path d="M0,0v1080h1920V0H0z M614.8,351.95c4.86-10.55,10.37-19.29,16.53-26.2c7.85-9.34,17.75-17.09,29.7-23.26
            c11.95-6.17,23.35-9.43,34.19-9.81c0.56,2.43,0.84,5.32,0.84,8.69c0,11.21-2.15,22.09-6.44,32.65
            c-4.3,10.56-9.81,19.94-16.53,28.16c-7.29,8.78-16.44,16.12-27.46,22c-11.02,5.88-21.48,8.83-31.39,8.83
            c-2.06,0-4.02-0.18-5.88-0.56c-0.19-0.56-0.38-1.59-0.56-3.08c-0.19-1.49-0.28-3.08-0.28-4.77
            C607.51,373.39,609.94,362.51,614.8,351.95z M778.59,631.48c-4.58,12.52-12.1,26.44-22.56,41.76
            c-9.16,13.27-19.01,25.5-29.57,36.71c-10.56,11.21-23.21,16.81-37.97,16.81c-9.9,0-18.03-1.45-24.38-4.34
            c-6.35-2.9-12.89-5.79-19.62-8.69c-6.73-2.89-15.79-4.34-27.18-4.34c-11.03,0-20.23,1.5-27.6,4.48
            c-7.38,2.99-14.39,5.98-21.02,8.97c-6.63,2.99-14.43,4.48-23.4,4.48c-13.64,0-25.6-5.42-35.87-16.25
            c-10.28-10.83-20.83-23.82-31.67-38.95c-12.52-17.94-23.22-39.84-32.09-65.72c-8.87-25.87-13.31-51.98-13.31-78.32
            c0-28.21,5.32-51.89,15.97-71.04c10.65-19.15,24.33-33.63,41.05-43.43c16.72-9.81,34.05-14.71,51.98-14.71
            c9.53,0,18.49,1.54,26.9,4.62c8.41,3.08,16.3,6.21,23.68,9.39c7.38,3.18,14.06,4.77,20.04,4.77c5.79,0,12.51-1.68,20.18-5.05
            c7.66-3.36,16.25-6.68,25.78-9.95c9.53-3.27,19.71-4.91,30.55-4.91c4.11,0,11.11,0.66,21.02,1.96c9.9,1.31,20.78,5,32.65,11.07
            c11.86,6.07,22.65,16.11,32.37,30.12c-0.56,0.56-3.27,2.57-8.13,6.03c-4.86,3.46-10.28,8.5-16.25,15.13
            c-5.98,6.63-11.21,15.04-15.69,25.22c-4.48,10.18-6.73,22.28-6.73,36.29c0,16.07,2.85,29.7,8.55,40.91
            c5.7,11.21,12.33,20.22,19.9,27.04c7.57,6.82,14.29,11.82,20.18,14.99c5.88,3.18,9.01,4.86,9.39,5.04
            C785.55,612.33,783.17,618.97,778.59,631.48z M1182.41,718.44h-58.34V507.77h-1.69l-84.09,210.68h-41.06l-84.09-210.68h-1.91
            v210.68h-58.13v-311.8h75.41l88.59,224.07h1.3l88.38-224.07h75.63V718.44z M1487.63,661.4h-41.05v57.05h-62.23V661.4h-154.93
            v-54.67c8.21-13.25,16.49-26.58,24.85-39.97c8.35-13.4,16.71-26.76,25.06-40.08c8.35-13.32,16.71-26.65,25.06-39.97
            c8.35-13.32,16.71-26.68,25.06-40.08c8.35-13.4,16.64-26.72,24.85-39.97h92.26v202.47h41.05V661.4z"></path>
        </g>
        </g>
	</svg>
        </div>
    </section>

    <section class="DJI_whole">
        <div class="style__whole_text">
            <p class="whole_text__feature">DJI Mavic 3 系列影像实力再攀高峰，开创航拍机多焦段三摄新时代。
                Mavic 3 Pro 搭载哈苏主摄与双焦段长焦相机， 拍摄视角实现崭新突破，带你自由创作，记录旖旎风光，
                探索影像叙事，拍出更有故事感的大作。
            </p>
            <p class="whole_text__service">
                在 DJI 官方商城购买 Mavic 3 Pro 系列，可享包邮配送、订单金额 1% 的 DJI 币返点等多项权益。
                】如需维修，登记案例后可获得顾问一对一服务，尽享购买 Mavic 3 Pro 系列的专属售后权益。
            </p>
        </div>
        <img class="style__whole_694" src="./img/DJI/694.png" alt="">
        <img class="style__whole_695" src="./img/DJI/695.jpg" alt="">
    </section>

    <section class="DJI">
        <div class="pc_text">
            <h3 class="pos_center center_text">
                三摄旗舰影像<br>
                独树一帜
            </h3>
            <div class="pos_center style__desc-text___1yKdX">
                一台航拍机，三颗镜头，无尽想象。多焦段所能实现的镜头语言更胜以往，焕新光影表达，也令 Mavic 3 Pro 拥有超群的多场景应对能力。
                轻触屏幕，即可在多个焦段间自如切换，面对不同场景都能收获各具风格的构图。
                创意顺畅实现，航拍效率一跃而起。
            </div>
            <div class="style__line-text-box">
                <div class="style__line-text-box___2lKKl box_1">
                    <p>
                    <div class="style__line-text-title___3heSp">4/3 CMOS<br>哈苏相机</div>
                    <div class="style__line___1h1bo"></div>
                    <div class="style__line-text-desc___10dbc">
                        24 mm 等效焦距<br>
                        f/2.8 至 f/11 可变光圈<br>
                        2000 万像素
                    </div>
                    </p>
                </div>
                <div class="style__line-text-box___2lKKl box_2">
                    <p>
                    <div class="style__line-text-title___3heSp">1/1.3 英寸 CMOS<br>中长焦相机</div>
                    <div class="style__line___1h1bo"></div>
                    <div class="style__line-text-desc___10dbc">
                        70 mm 等效焦距<br>
                        f/2.8 光圈<br>
                        4800 万像素
                    </div>
                    </p>
                </div>
                <div class="style__line-text-box___2lKKl box_3">
                    <p>
                    <div class="style__line-text-title___3heSp">1/2 英寸 CMOS<br>长焦相机</div>
                    <div class="style__line___1h1bo"></div>
                    <div class="style__line-text-desc___10dbc">
                        166 mm 等效焦距<br>
                        7 倍光学变焦、28 倍混合变焦<br>
                        f/3.4 光圈<br>
                        f/3.4 1200 万像素
                    </div>
                    </p>
                </div>
            </div>
        </div>
        <div class="DJI_img"></div>
    </section>
</div>
</body>
<script>
$(function (){
    let mySwiper = new Swiper ('.banner .swiper-container',{
        autoplay: {
            delay: 3000,
        },
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            bulletClass : 'my-bullet',//需设置.my-bullet样式
            bulletActiveClass: 'my-bullet-active',
        },

        on:{
            init: function(){
                setTimeout(()=>{
                    swiperAnimateCache(this); //隐藏动画元素
                    swiperAnimate(this); //初始化完成开始动画
                })
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                let offsetY = this.activeIndex * 45;
                // console.log(this.activeIndex);
                $(".swiper-name>span").animate({top: -offsetY}, 1000);
                $(".swiper-num>span").animate({top: -offsetY}, 1000);
            }
        }
    });
    mySwiper.autoplay.stop();

    // banner在视口时自动播放
    ScrollTrigger.create({
        trigger: '.banner',
        start: 'top bottom',
        scrub: true,
        onEnter() {
            mySwiper.autoplay.start();
        },
        onEnterBack(){
            mySwiper.autoplay.start();
        },
        onLeave() {
            mySwiper.autoplay.stop();
        }
    })

})
</script>
<script>  new WOW({offset: 100,delay:0.2}).init();</script>
</html>
